<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按钮</button>
  <script>
    // 'use strict';



    // 箭头函数的特点
    // 1. 写法更加简便
    // 2. this指向更加明确(箭头函数是没有自己的this，箭头函数里面的this指向的是它外层的那个this)


    // function fn1() {
    //   console.log(this); // window
    // }
    // fn1();

    // document.querySelector("button").onclick = function() {
    //   console.log(this); // button
    // }
    // document.querySelector("button").onclick = () => {
    //   console.log(this); // window
    // }






    // 所有情况下this的指向(重点)



    // 1. 全局的this指向window
    // console.log("全局的this:" + this); // window
    


    // 2. 全局的函数的this指向window
    // function fn1() {
    //   console.log("全局函数的this:" + this); // window
    // }
    // fn1();



    // 3. 严格模式下的this指向undefined
    // function fn3() {
    //   console.log(this); // undefined
    // }
    // fn3();



    // 4. 对象里面的函数的this指向的是对象本身
    // let a = 10;
    // const obj = {
    //   // a: a,
    //   // fn: function() {
    //   //   console.log(this.a);
    //   // }
    //   // es6规定，在对象里面，如果key和value相同，那么可以省略冒号和value
    //   // es6规定，在对象里面，如果value是函数，那么可以省略冒号和function关键字
    //   a,
    //   fn() {
    //     console.log("对象里面的函数的this:" + this);
    //   }
    // }
    // obj.fn();



    // 5. 构造函数的this指向的是构造出来的实例对象
    // function Person(name) {
    //   console.log("构造函数的this:" + this);
    //   this.name = name;
    // }
    // const person = new Person("zhangpang"); // person就是实例对象



    // 6. 事件处理函数的this指向的是事件对象
    // document.querySelector("button").onclick = function() {
    //   console.log("事件处理函数的this:" + this); // button
    // }



    // 7. 定时器的this指向window
    // setTimeout(() => {
    //   console.log(this); // Window
    // }, 1000)



    // 8. 箭头函数是没有自己的this，箭头函数里面的this指向的是它外层的那个this
    // function fnn() {
    //   this;
    //   const abc = () => {
    //     console.log(this);
    //   }
    // }
    








    // 当this指向和我们的需求不一样的时候
    // 用call,apply,bind方法可以改变this指向
    const obj = {
      name: "zhangpang"
    }
    function fn() {
      // 希望打印出"zhangpang"
      // 希望this指向obj，默认是指向window的
      console.log(this.name);
    }
    // fn();
    fn.call(obj); // 执行fn，但是让fn函数里面的this指向obj对象
    fn.apply(obj);
    fn.bind(obj)(); // bind不会执行fn，而是会返回一个新函数




    // 箭头函数的this怎么改变?
    // 箭头函数没有this，所以不能改变
  </script>
</body>
</html>